<template>
  <NewCard title="选择咨询方式" isright="isright" isleft="isleft">
    <template slot="left">
      <svg-icon icon-class="return_icon" class="returnIcon" @click="returnBtn"/>
    </template>
    <template slot="right">
      <span class="hintRight">
        等级说明
        <el-tooltip placement="bottom" effect="light" :offset="200">
          <svg-icon icon-class="ts_icon" />
          <div slot="content">
            <!-- <h3>等级说明</h3> -->
            <p v-for="(grade, index) in gradeTem" :key="index">
              <span>{{ grade.levelName }}</span
              >：<span>{{ grade.describable }}</span>
            </p>
            <!-- <p>
              甲级专家：10年专业年资，CPA注册会计师、高级律师、高级税务师、CPA注册会计师；
            </p>
            <p>乙级专家：8年专业年资，CPA注册会计师、高级律师；</p>
            <p>丙级专家：5年专业年资，CPA注册会计师、高级律师。</p> -->
          </div>
        </el-tooltip>
      </span>
    </template>
    <div class="pay">
      <div class="pay_main">
        <div class="selectExpert">
          <!-- --------------------------图文咨询-------------------------- -->
          <div class="selectBox">
            <p class="selectTitle">图文咨询</p>
            <ul>
              <li v-for="expert in expertList" :key="expert.id">
                <el-popover placement="top-start" trigger="hover" content="该等级暂无专家" :disabled="expert.isExistence != '0'">
                  <div slot="reference">
                    <div class="expertInfo">
                      <img :src="expert.icon || circleUrl" alt="" />
                      <p>{{ expert.expertRank }}</p>
                    </div>
                    <div class="selectTitleInfo">
                      <p>{{ expert.base }}</p>
                      <el-radio
                        @change="handlerMany(expert)"
                        v-model="askRadio"
                        :label="expert.id"
                        :disabled="expert.isExistence == '0'"
                      ></el-radio>
                    </div>
                  </div>
                </el-popover>
              </li>
            </ul>
          </div>

          <!-- --------------------------现场咨询-------------------------- -->
          <div class="selectBox">
            <p class="selectTitle">现场咨询</p>
            <ul>
              <li v-for="expert in sceneList" :key="expert.id">
                <el-popover placement="top-start" trigger="hover" content="该等级暂无专家" :disabled="expert.isExistence != '0'">
                  <div slot="reference">
                    <div class="expertInfo">
                      <img :src="expert.icon || circleUrl" alt="" />
                      <p>{{ expert.expertRank }}</p>
                    </div>
                    <div class="selectTitleInfo">
                      <p>{{ expert.base }}</p>
                      <el-radio
                        @change="handlerMany(expert)"
                        v-model="askRadio"
                        :label="expert.id"
                        :disabled="expert.isExistence == '0'"
                      ></el-radio>
                    </div>
                  </div>
                </el-popover>
              </li>
            </ul>
          </div>

          <!-- --------------------------填写地址-------------------------- -->
          <div class="selectBox inputAddress" v-if="isScene">
            <!-- <p class="selectTitle">填写地址</p> -->
            <el-form ref="form" :model="sceneData" label-width="80px" label-position="left">
              <el-form-item label="详细地址">
                <el-col :span="10">
                  <!-- 级联选择器 -->
                  <el-cascader v-model="sceneData.cityCode" :options="sceneOption"></el-cascader>
                </el-col>
                <el-col class="line" :span="1">-</el-col>
                <el-col :span="13">
                  <el-input v-model="sceneData.address" placeholder="详细地址"></el-input>
                </el-col>
              </el-form-item>
            </el-form>
          </div>

        </div>
      </div>
      <div class="payBtn" v-if="btnpay">
        <p>
          应付问金：<span>{{ paymoneny }}</span>
        </p>
        <el-button round @click="suborder">提交订单</el-button>
      </div>
    </div>
  </NewCard>
</template>

<script>
//引入省市区数据的插件
import { regionData, provinceAndCityData, CodeToText } from "element-china-area-data";
import NewCard from "@/wss/components/newCard.vue";
// import bus from "@/wss/utils/bus.js"
import {
  getpriceCommissionListApi,
  addConsultTypeListApi,
} from "@/BMViews/api/work/consult.js";

import { getExpertlevelListApi } from "@/wss/newApi_3-24/work/expert.js";
import fw_icon from "@/assets/images/fw_icon.png";
export default {
  name: "consultation",
  props: {
    formdata: { type: Object },
  },
  components: { NewCard },
  data() {
    return {
      pageing: { pageNum: 1, pageSize: 100 },
      balance: false, //充值按钮的显示隐藏
      isright: true, //显示时间提示支付
      acceptEmail: "", //接收邮箱
      activeName: "askGold", //默认显示问金支付
      btnpay: true, //支付按钮的显示
      gradeTem: [], //等級说明
      circleUrl: fw_icon, //头像
      askRadio: 1, //1为选中，0为不选择
      //图文咨询
      expertList: [],
      //现场咨询
      sceneList: [],
      //账户集合
      mountlist: [],
      //订单支付金额
      paymoneny: "",

      Expertid: "",
      selectExpertType: "1", //判断当前是一对一还是一对多
      //表单提交
      formdatalist: {},
      //接受父組件的值
      dataview: {},

      isScene: false,// 是否是现场咨询
      sceneOption: regionData,//省市区的数据源
      // 详细地址
      sceneData:{
        cityCode: [],//城市编码
        address: '',//地址
      },
    };
  },
  mounted() {
    //再次调用时先关闭上次
    this.$bus.$off("father");
    this.$bus.$on("father", (e) => {
      this.getpriceCommissionListApifn(e.typeId);
      this.dataview = e;
    });
    this.expertlevel();
  },
  created() {},
  //监听时间
  watch: {},
  //计算时间
  computed: {},
  methods: {

    // 点击返回按钮
    returnBtn(){
      this.$bus.$emit('returnBtnShow',1)
    },

    //获取专家信息
    async getpriceCommissionListApifn(typeId) {
      let result = await getpriceCommissionListApi({ consultType: typeId });
      if (result.code == 200) {
        // 获取图文咨询
        this.expertList = result.data.filter(item=>{
          return item.site == '0'
        })
        // 获取现场咨询
        this.sceneList = result.data.filter(item=>{
          return item.site == '1'
        })
      }
    },
    //提交订单
    async suborder() {
      //现场咨询 
      if(this.isScene){
        if(!this.sceneData.cityCode.length || !this.sceneData.address){
          this.$message({message: "请填写详细地址",type: "warning",});
          return
        }
      }

      if (this.Expertid == "") {
        this.$message({message: "请选择专家",type: "warning",});
      } else {
        this.$emit("demandShow", 3);
        //合并對象
        let newobj = Object.assign(this.formdatalist, this.dataview);
        console.log(this.formdatalist, "newobjnewobjnewobj");
        
        let formDate = new FormData();
        //   //收集组建传递过来的值
        formDate.set("type", newobj.type);
        formDate.set("typeId", newobj.typeId);
        formDate.set("consultMode.id", newobj.consultMode);
        // formDate.set("consultModen.numbers", newobj.consultNumbers);
        
        // formDate.set("consultMode.name", newobj.consultWay);
        formDate.set("consultMode.name", newobj.site=='0'?'图文咨询':'现场咨询');

        formDate.set("expertLevel", newobj.expertLevel);
        formDate.set("priceId", newobj.priceId);
        formDate.set("question", newobj.question);
        formDate.set("consultGrade", newobj.consultGrade);
        formDate.set("receiveEmail", this.$store.state.user.email);
        formDate.set("receiveFormat", "PDF");
        if (newobj.fileList) {
          newobj.fileList.forEach((item, i) => {
            formDate.append(`file`, item.raw);
          });
        } else {
        }

        // 如果有地址就获取详细地址
        if(this.isScene){
          let addressArr = []
          this.sceneData.cityCode.forEach(item=>{
            addressArr.push(CodeToText[item])
          })
          let str = addressArr.join("") + this.sceneData.address
          formDate.set("address", str);
        }

        let result = await addConsultTypeListApi(formDate);
        if (result.code == 200) {
          // 去支付页面
          this.$bus.$emit("topay", newobj);
          // 返回消费订单id
          this.$bus.$emit("EventGetOrder", result.orderId);
          // this.$message({
          //   message: "提交成功",
          //   type: "success",
          // });
        } else {
          this.$message({
            message: "提交失敗",
            type: "error",
          });
        }
      }
    },

    //单击一对一专家服务
    // handlerOne(expert) {
    //   console.log(expert);
    //
    //   this.paymoneny = expert.base;
    //   this.formdatalist = {
    //     expertLevel: expert.expertLevel,
    //     priceId: expert.id,
    //     price: expert.base,
    //     consultNumbers: expert.consultNumbers,
    //     consultMode: expert.consultMode,
    //     consultWay: expert.consultWay,
    //     consultGrade: expert.expertRank,
    //   };

    //   this.selectExpertType = "1";
    //   this.expertList.forEach((item) => {
    //     item.isChecked = false;
    //   });
    //   expert.isChecked = true;
    // },

    //专家服务
    handlerMany(expert) {
      // 判断是否是现场咨询 isScene
      if(expert.site=='0'){
        this.isScene = false //图文咨询
      }else if(expert.site=='1'){
        this.isScene = true //现场咨询
      }

      this.Expertid = expert.id;
      this.askRadio = expert.id;
      this.selectExpertType = expert.id;
      this.paymoneny = expert.base;
      this.formdatalist = {
        site: expert.site,//0图文咨询 1现场咨询
        expertLevel: expert.expertLevel, //专家等级
        priceId: expert.id, //专家id
        price: expert.base,
        consultNumbers: expert.consultNumbers,
        consultMode: expert.consultMode,
        consultWay: expert.consultWay, 
        consultGrade: expert.expertRank, //专家等级中文
      };
    },

    //查询专家等级的接口
    async expertlevel() {
      let { rows, code, total } = await getExpertlevelListApi();
      if (code == 200) {
        this.gradeTem = rows;
      }
    },
  },
};
</script>
<style scoped>
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hintRight {
  font-size: 12px;
  color: #999;
}
::v-deep .el-card__body {
  position: relative;
}
/* 支付信息 */
.pay_main {
  margin-bottom: 60px;
}
.pay_main .el-card {
  border-radius: 12px;
}
::v-deep .pay_main .el-card__body {
  padding: 20px;
}
.pay_main h3 {
  margin: 0;
  margin-bottom: 12px;
  font-size: 16px;
  color: #333;
}
.pay_main p {
  font-size: 14px;
  color: #999;
  margin: 0;
  line-height: 24px;
}
.pay_main .el-row {
  margin-top: 40px;
}
::v-deep .pay_main .el-row .el-input__inner {
  border-radius: 8px;
  height: 44px;
  line-height: 44px;
}

/* 选择专家 */
.selectExpert h3 {
  font-size: 18px;
  color: #333;
  margin-top: 20px;
}
.selectBox > .selectTitle {
  font-size: 12px;
  color: #666;
  margin-top: 15px;
  margin-bottom: 5px;
}

.selectBox ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.selectBox li {
  width: 32.5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #efefef;
  border-radius: 12px;
  padding: 15px;
  transition: all 0.3s;
  cursor: pointer;
  margin: 10px 0px;
}
.selectBox .selectTitleInfo {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.selectBox .selectTitleInfo p {
  margin-right: 8px;
}
.selectBox .selectTitleInfo:hover {
  
}
.selectBox li .expertInfo {
  display: flex;
  align-items: center;
}
.selectBox l .expertInfo > p {
  font-size: 16px;
  color: #333;
  margin-left: 5px;
}
.selectBox li .expertInfo > img {
  width: 35px;
  height: 35px;
  border-radius: 50%;
}
.selectBox li .expertInfo p {
  font-size: 16px;
  margin-left: 10px;
}
.selectBox li >>> span{
  width: 100%;
}
.selectBox li >>> .el-popover__reference{
  display: flex;
  justify-content: space-between;
  width: 100%;
}
/* .selectBox li:hover,
.selectBox li.isChecked {
 background-color: #39486f;
} */
.selectBox li:hover p,
.selectBox li.isChecked p {
  /* color: #fff; */
  color: #f87a23;
}

.inputAddress{
  margin-top: 15px;
}
.inputAddress .el-cascader{
  width: 100%;
}
/* 选择专家 end*/

.pay_main .el-row .acceptEmail {
  border: 0;
  padding: 5px 0;
  margin: 7px 0;
  margin-right: 10px;
  font-size: 14px;
  color: #bababa;
  background: #fff;
  cursor: pointer;
}
.pay_main .el-row .acceptEmail:hover {
  color: #f87a23;
}
.pay_main .inputTitle {
  font-size: 18px;
  color: #333;
  margin-bottom: 15px;
}
.pay_main .inputTitle span {
  font-size: 14px;
  color: #999;
}
::v-deep .pay_main .el-tabs__header {
  border: 0;
  margin-bottom: 24px;
}
::v-deep .pay_main .el-tabs__nav {
  width: 100%;
  display: flex;
  justify-content: space-between;
  border: 0;
}
::v-deep .pay_main .el-tabs__item {
  width: 49%;
  border-radius: 8px;
  text-align: center;
  font-size: 14px;
  border: 0;
  background-color: #fafafa;
}
::v-deep .pay_main .el-tabs__item.is-active {
  background-color: #f1f3ff;
  color: #39486f;
}
::v-deep .pay_main .el-tabs__item:hover {
  color: #39486f;
}

.askGold {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}
.askGold li {
  display: flex;
  margin-bottom: 24px;
}
.askGold li .el-avatar {
  margin-right: 14px;
}
.askGold .askInfo h3 {
  margin-bottom: 5px;
  font-size: 16px;
  color: #333;
}
.askGold .askInfo {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ecedf0;
  padding-bottom: 24px;
}
.askGold .askInfo p {
  font-size: 12px;
  color: #666;
}
.askGold .askInfo button {
  color: #39486f;
  border-color: #39486f;
  padding: 5px 15px;
}
::v-deep .selectTitleInfo .el-radio__label {
  display: none;
}
::v-deep .selectTitleInfo .el-radio .el-radio__inner {
  width: 24px;
  height: 24px;
  border-color: #bbbbbb;
  background: #fff;
}
::v-deep .selectTitleInfo .el-radio .is-disabled .el-radio__inner {
  background: #f2f2f2;
}
::v-deep .selectTitleInfo .el-radio .is-checked .el-radio__inner {
  border-color: #f87a23;
  background: #f87a23;
}
::v-deep .selectTitleInfo .el-radio__input.is-checked .el-radio__inner::after {
  content: "";
  width: 11px;
  height: 7px;
  border: 3px solid white;
  border-top: transparent;
  border-right: transparent;
  text-align: center;
  display: block;
  position: absolute;
  top: 6px;
  left: 5px;
  vertical-align: middle;
  transform: rotate(-45deg);
  border-radius: 0px;
  background: none;
}
.payBtn {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 9;
  width: 100%;
  background-color: #fff;
  border-top: 1px solid #ecedf0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 30px;
}
.payBtn p {
  margin: 0;
  font-size: 14px;
}
.payBtn p span {
  color: #f87a23;
  font-size: 16px;
}
.payBtn .el-button {
  background-color: #f87a23;
  border-color: #f87a23;
  color: #fff;
  font-size: 14px;
  padding: 10px 50px;
}
.payBtn .el-button:hover {
  opacity: 0.9;
}

.scanQr {
  text-align: center;
}
.scanQr img {
  width: 150px;
}
.scanQr p {
  color: #f87a23;
  font-size: 18px;
}
.scanQr span {
  font-size: 12px;
  color: #999;
}
@media (max-width: 1300px) {
  .selectBox ul>li{
    padding: 15px 10px;
  }
  .selectBox li .expertInfo p{
    font-size: 14px;
  }
}
@media (max-width: 1230px) {
  .selectBox li .expertInfo > img{
    width: 30px;
    height: 30px;
  }
}

@media (max-width: 1170px) {
  .selectBox ul>li{
    padding: 12px 6px;
  }
  .selectBox li .expertInfo p{
    margin-left: 5px;
  }
  ::v-deep .selectTitleInfo .el-radio .el-radio__inner{
    width: 18px;
    height: 18px;
  }
  ::v-deep .selectTitleInfo .el-radio__input.is-checked .el-radio__inner::after{
    top: 4px;
    left: 3px;
  }
}
</style>
<style>
.el-tooltip__popper.is-light {
  border: 0 !important;
  box-shadow: 2px 4px 16px 2px #e2e2e2;
  padding: 20px;
}
.el-tooltip__popper.is-light h3,
.el-tooltip__popper.is-light p {
  margin: 0;
}
.el-tooltip__popper.is-light h3 {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}
.el-tooltip__popper.is-light p {
  color: #666;
  font-size: 12px;
  line-height: 22px;
}
.el-tooltip__popper .popper__arrow {
  /* 上方箭头 */
  border-top-color: #fff !important;
  /* 下方箭头 */
  border-bottom-color: #fff !important;
}
.el-tooltip__popper .popper__arrow:after {
  border-top-color: #fff !important;
  border-bottom-color: #fff !important;
}

@media (max-width: 1120px) {
  .payBtn {
    padding: 10px 30px !important;
  }
  .payBtn .el-button {
    padding: 8px 30px !important;
  }
}
</style>